<template>
  <div id="Tab">
    <mt-tabbar fixed>
      <mt-tab-item id="tab1">
        <a @click="goHome">
          <div class="iconfont icon-shouye con"></div>{{tab1}}
        </a>
      </mt-tab-item>
      <mt-tab-item id="tab2">
        <a @click="goFind">
          <div class="iconfont icon-faxian con" ></div>{{tab2}}
        </a>
      </mt-tab-item>
      <mt-tab-item id="tab3">
        <a @click="goRank">
          <div class="iconfont icon-paihang con" ></div>{{tab3}}
        </a>
      </mt-tab-item>
      <mt-tab-item id="tab4">
        <a @click="goUserCenter">
          <div class="iconfont icon-yonghu con"></div>{{tab4}}
        </a>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
	name: 'Tab',
	props: {
		tab1:String,
		tab2:String,
		tab3:String,
		tab4:String
	},
  data () {
    return {
     
    }
  },
  methods:{
	  //首页
	  goHome(){
		  this.$router.push('/');
	  },
	  //发现
	  goFind(){
		  this.$router.push('/find');
	  },
	  //排行榜
	  goRank(){
	  	  this.$router.push('/rank');
	  },
	  //个人中心
	  goUserCenter(){
		  this.$router.push('/userCenter');
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>